<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="count++">修改count {{ count }}</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "AboutView",
});
</script>

<script lang="ts" setup>
import { ref ,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";

let count = ref(0);

onBeforeMount(() => {
  console.log("onBeforeMount");
})
onMounted(() => {
  console.log("onMounted1");
})
onMounted(() => {
  console.log("onMounted2");
})
onMounted(() => {
  console.log("onMounted3");
})
onMounted(() => {
  console.log("onMounted4");
})
onBeforeUpdate(() => {
  console.log("onBeforeUpdate");
})
onUpdated(() => {
  console.log("onUpdated");
})
onBeforeUnmount(() => {
  console.log("onBeforeUnmount");
})
onUnmounted(() => {
  console.log("onUnmounted");
})
</script>
